<template>
  <div class="left">
    <div class="left-tree">
      <Tree @handleNodeClick="handleNodeClick" />
    </div>
    <div class="left-control">
      <Control ref="control" @setView="setView" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Tree from "../Tree/index.vue";
import Control from "../Control/index.vue";

@Component({
  components: { Tree, Control },
})
export default class extends Vue {
  $refs!: {
    control: Control;
  };
  // 查询
  setView(data) {
    data=JSON.parse(JSON.stringify(data))
    this.$emit("setView", data);
  }
  // 树图点击
  handleNodeClick(data) {
    // console.log(data);
    // id: "001261#100435539#32#100000923-pms2"
    // myBdzId: "100435539"
    // name: "保护室第三排02可见光"
    this.$refs.control.form = {
      stationId: data.myBdzId,
      name: data.name,
      id: data.id,
    };
  }
}
</script>

<style lang="scss" scoped>
.left {
  width: 100%;
  height: 100%;
  border: 1px #0276c0 solid;
  &-tree {
    width: 100%;
    padding: 0.1rem;
    border-bottom: 1px solid #0276c0;
    overflow: auto;
    height: calc(100% - 280px);
  }
  &-control {
    width: 100%;
    padding: 0.1rem;
    height: 280px;
  }
}
</style>

